<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/pmgr/css/jquery/i18n/jquery.ui.datepicker-ko.js"></script>
<link rel="stylesheet" href="/pmgr/css/jquery/themes/ui-lightness/jquery.ui.all.css">


<script type="text/javascript">

var rooms = [];
<c:if test="${rooms !=null && fn:length(rooms)>0 }">
	<c:forEach var="map" items="${rooms}" varStatus="status">
	rooms.push({
		pr_no:"${map.pr_no}",
// 		p_id:"${map.pr_no}",
		room_nm: "${map.room_nm}",
		x_cood:"${map.x_cood}",
		y_cood:"${map.y_cood}",
		fromto:"${map.fromto}",
		rm_status:"${map.rm_status}",
		use_yn:"${map.use_yn}",
		pm_pay:"${map.pm_pay}",
		busy_type:"${map.busy_type}",
		use_man_cnt:"${map.use_man_cnt}",
		use_max_cnt:"${map.use_max_cnt}",
		pm_per:"${map.pm_per}",
		pm_dc_m:"${map.pm_dc_m}",
		busy_1_base:"${map.busy_1_base}000",
		busy_1_fri :"${map.busy_1_fri }000",
		busy_1_sat :"${map.busy_1_sat }000",
		busy_2_base:"${map.busy_2_base}000",
		busy_2_fri :"${map.busy_2_fri }000",
		busy_2_sat :"${map.busy_2_sat }000",
		busy_3_base:"${map.busy_3_base}000",
		busy_3_fri :"${map.busy_3_fri }000",
		busy_3_sat :"${map.busy_3_sat }000",
		add_usr_pay:"${map.add_usr_pay }000",
		add_child_pay:"${map.add_child_pay }000",
		chk_yn :""
		});

	</c:forEach>
</c:if>


$(document).ready(function(){
	$( "#reservation_dt" ).datepicker({
			dateFormat: 'yy-mm-dd',
	 		changeMonth: true,
	 		changeYear: true,
	 		showOn: 'button',
	 		buttonImageOnly: true,
	 		buttonImage: "/pmgr/images/icon_calendar.gif"
	 	}).change(function(){changeDate();});

	$(".trRooms").mouseover(function (){
		$(this).addClass("over");
	}).mouseout(function (){
		$(this).removeClass("over");
	})
// 	.click(function(){
// 		if($(this).find("input[name='pr_no']").css("display")!="none"){
// 			if($(this).find("input[name='pr_no']").attr("checked")){
// 				$(this).find("input[name='pr_no']").attr("checked",false);	
// 			}else{
// 				$(this).find("input[name='pr_no']").attr("checked",true);
// 			}			
// 		}
// 	});
	
	$(".sCalendar").each(function (){
		$(this).click(function (){
			var rDate =Number($(this).attr("rDate"));
			var nDt = new Date();
			if(Number(nDt.toString("yyyyMMdd")) > rDate){
				alert("오늘 이전자료는 선택할수 없습니다.");
				return false;
			}
			
// 			nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
// 			nDt.addMonths(nextNum);
			location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+$(this).attr("rDate")+"&pg_no=${param.pg_no}";
		});
	});
});

function changeDate(){
	location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+$("#reservation_dt").val().replace(/-/g, '')+"&pg_no=${param.pg_no}";
}

//다음페이지로 값 넘김
function saveForm(){

	if($("input[name='pr_no']:checked").length==0){
		alert("사이트을 선택하세요");
		return false;
	}
	
	$("input[name='pr_no']:checked").each(function (){
		$("#frmData").append("<input name=\"pr_nos\" value=\""+$(this).val()+"\" type=\"text\" />");
		
		$("#frmData").append("<input name=\"rsv_days\" value=\""+$("#trPrNo"+$(this).val()).find("select[name='rsv_days']").val()+"\" type=\"text\" />");
		$("#frmData").append("<input name=\"man_cnts\" value=\""+$("#trPrNo"+$(this).val()).find("select[name='man_cnts']").val()+"\" type=\"text\" />");
		$("#frmData").append("<input name=\"chi_cnts\" value=\""+$("#trPrNo"+$(this).val()).find("select[name='chi_cnts']").val()+"\" type=\"text\" />");
	});

	$("#frmData").submit();
}

function goNextMonth(nextNum){
	var nDt = new Date();
	nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
	nDt.addMonths(nextNum);

	var nowDt =new Date();
// 	var nDt = new Date();
	if(Number(nowDt.toString("yyyyMMdd")) > Number(nDt.toString("yyyyMMdd"))){
		alert("오늘 이전자료는 선택할수 없습니다.");
		return false;
	}
	location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+nDt.toString("yyyyMMdd")+"&pg_no=${param.pg_no}";
}
function chkMaxCnt(num, maxCnt, type){
	var sum = Number($("select[name='man_cnts']:eq("+num+")").val())+Number($("select[name='chi_cnts']:eq("+num+")").val());

	if(sum>maxCnt){
		alert("수용인원을 초과하였습니다\n인원을 확인하세요");
		if('1'==type){
			var data = maxCnt-$("select[name='man_cnts']:eq("+num+")").val();
			$("select[name='chi_cnts']:eq("+num+")").val(data);
		}else{
			var data = maxCnt-$("select[name='chi_cnts']:eq("+num+")").val();
			$("select[name='man_cnts']:eq("+num+")").val(data);
		}
	}
}
</script>

			<table style="width: 100%;">
				<tr>
					<td style="width: 25%;text-align: center;">
						<div style="height: 25px;">
							<a href="#" onclick="goNextMonth(-1)"><img alt="" src="/camping/img/calendar_arrow_l.jpg"  style="vertical-align:top;padding-top: 3px; padding-right: 10px;"></a>
							
							<strong style="font-size: 13px;font-weight: bold;font-family: Arial Black">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월</strong>
							<a href="#" onclick="goNextMonth(1)"><img alt="" src="/camping/img/calendar_arrow_r.jpg" style="vertical-align:top;padding-top: 3px; padding-left : 10px;"></a>
						</div>
						<table class="lCalTable" style="width: 100%;">
							<colgroup>
								<col width="100"/>
								<col width="100"/>
								<col width="100"/>
								<col width="100"/>
								<col width="100"/>
								<col width="100"/>
								<col width="100"/>
							</colgroup>
							<tbody>
							<tr>
								<th class="calRed" >일</th>
								<th>월</th>
								<th>화</th>
								<th>수</th>
								<th>목</th>
								<th>금</th>
								<th class="calBlue">토</th>
							</tr>
							${leftCal }
							</tbody>
						</table>
						오늘 : ${nDtAll }
					</td>
					<td width="60%" valign="top">
						<div style="text-align: right;height: 25px;vertical-align: bottom;">
						TODAY : ${nDtAll }
						</div>
						
						<table class="rCaltable" style="width: 100%;" class="ddf">
							<colgroup>
								<col width="80">
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<th scope="row">캠핑장명</td>
									<td>${pensionInfo.p_nm }</td>
								</tr>
								<tr>
									<th scope="row">결제안내</th>
									<td>
<c:if test="${aList1 !=null && fn:length(aList1)>0 }">
	<c:forEach var="map1" items="${aList1}" varStatus="status">
		<img src="/camping/img/account.jpg" border="0" align="middle"> ${map1.paa_desc }<br/>
	</c:forEach>
</c:if>
									</td>
								</tr>
								<tr>
									<th scope="row">요금기간</th>
									<td>
										<c:if test="${rooms[0].busy_type =='0101' || rooms[0].busy_type =='0102' || rooms[0].busy_type =='0103'}">
															<img alt="" src="/camping/img/charge_bisu.jpg" align="middle"> 비수기
										</c:if>
										<c:if test="${rooms[0].busy_type =='0104' || rooms[0].busy_type =='0105' || rooms[0].busy_type =='0106'}">
															<img alt="" src="/camping/img/charge_junsung.jpg" align="middle" > 준성수기
										</c:if>
										<c:if test="${rooms[0].busy_type =='0107' || rooms[0].busy_type =='0108' || rooms[0].busy_type =='0109'}">
															<img alt="" src="/camping/img/charge_sungsu.jpg" align="middle" > 성수기
										</c:if>
									</td>
								</tr>
								<tr>
									<td colspan="2">
									달력에서 이용일자를 클릭 후 원하시는 사이트을 체크한 후 예약하기 버튼을 클릭하세요
									</td>
								</tr>							
							</tbody>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						이용일자(예약시작일) : <span class="orange1 bold">${rDtAll }</span>
					</td>
					<td align="right">
						<img alt="" src="/camping/img/charge_bisu.jpg" align="middle"> 비수기
						<img alt="" src="/camping/img/charge_junsung.jpg" align="middle" > 준성수기
						<img alt="" src="/camping/img/charge_sungsu.jpg" align="middle" > 성수기
						<img alt="" src="/camping/img/charge_sale.jpg" align="middle" > 할인기간
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<table class="cal1">
							<colgroup>
								<col width="*">
								<col width="100">
								<col width="150">
								<col width="70">
								<col width="100">
								<col width="100">
								<col width="100">
								<col width="100">
								<col width="100">
							</colgroup>
							<tbody>
								<tr>
									<th>사이트명</th>
									<th>상태</th>
									<th>기준/최대<br>추가인당(성인/아동)</th>
									<th>면적(가로/세로)</th>
									<th>이용기간</th>
									<th>인원</th>
									<th>주중</th>
									<th>금요일</th>
									<th>주말(토)<br/>공휴일전날</th>
								</tr>
<c:if test="${rooms !=null && fn:length(rooms)>0 }">
	<c:forEach var="map" items="${rooms}" varStatus="status">
								<tr class="trRooms" id="trPrNo${map.pr_no}">
									<td>
										<c:if test="${map.fromto!=0 }">
											<label>
											<input name="pr_no" type="checkbox" value="${map.pr_no}" <c:if test="${map.pr_no == param.sel_pr_no }">checked="checked"</c:if> />
											${map.room_nm}
											</label>
										</c:if>
									 	<c:if test="${map.fromto==0 }">
									 		&nbsp;&nbsp;&nbsp;&nbsp;
											<input name="pr_no" type="checkbox" value="${map.pr_no}" style="display: none;" />
											${map.room_nm}
										</c:if>
									</td>
									<td style="text-align: center;">
										<c:if test="${'C'==map.rm_status }">
											<img alt="" src="/camping/img/reservation_end.jpg">
<!-- 										예약완료 -->
										</c:if>
										<c:if test="${'R'==map.rm_status }">
											<img alt="" src="/camping/img/reservation_standby.jpg">
	<!-- 										예약대기 -->
										</c:if>
										<c:if test="${map.fromto!=0 }">
											<img alt="" src="/camping/img/reservation_yes.jpg">
	<!-- 										예약가능 -->
										</c:if>
									</td>
									<td style="text-align: center;">
									${map.use_man_cnt }/${map.use_max_cnt }<br>
										(${map.add_usr_pay },000원 /
										 ${map.add_child_pay },000원)
									</td>
									<td style="text-align: center;">
										${map.area_p }m/${map.area_m }m
									</td>
									<td style="text-align: center;">
										<select name="rsv_days">
										<c:if test="${map.fromto!=0 }">
											<c:if test="${!empty map.relay_state }">
												<c:forEach begin="1" end="${map.fromto }" var="iCnt" >
													<c:if test="${'S'==map.relay_state }">
														<c:if test="${map.relay_day<=iCnt }">
															<option value="${iCnt }">${iCnt }박</option>	
														</c:if>
													</c:if>
													<c:if test="${'E'==map.relay_state }">
														<c:if test="${1==iCnt }">
															<option value="">불가</option>	
														</c:if>
													</c:if>
												</c:forEach>
											</c:if>
											<c:if test="${empty map.relay_state }">
												<c:forEach begin="1" end="${map.fromto }" var="iCnt" >
													<option value="${iCnt }">${iCnt }박</option>
												</c:forEach>
											</c:if>
										</c:if>
										<c:if test="${map.fromto==0 }">
											<option value="">불가</option>
										</c:if>
										</select>
										<c:if test="${'E'==map.relay_state }">
											<br/>${fn:substring(map.n_reservation_dt,4,6)}월 ${fn:substring(map.n_reservation_dt,6,8)}일에서 ${map.relay_day }박 이상 가능
										</c:if>
										<c:if test="${'0'!=map.rrr_pay }">
											<br/>연박할인 : <fmt:formatNumber value="${map.rrr_pay }" pattern="#,###"/>원
										</c:if>
										
									</td>
									<td style="text-align: center;">
										성인 <select name="man_cnts" onchange="chkMaxCnt(${status.index },${map.use_max_cnt },1);">
											<c:forEach begin="0" end="${map.use_max_cnt }" varStatus="indx">
												<option value="${indx.index }" <c:if test="${indx.index == map.use_man_cnt }">selected="selected"</c:if>>${indx.index }</option>
											</c:forEach>
										</select><br>
										아동 <select name="chi_cnts" onchange="chkMaxCnt(${status.index },${map.use_max_cnt },2);">
											<c:forEach begin="0" end="${map.use_max_cnt }" varStatus="indx">
												<option value="${indx.index }">${indx.index }</option>
											</c:forEach>
										</select><br>
									</td>
									<td style="text-align: center;" class="<c:if test="${map.busy_type =='0101' || map.busy_type =='0104' || map.busy_type =='0107'}">calRed bold</c:if>">
<c:set var="imgUrl" value=""/>
<c:set var="usePay" value="0"/>
	<c:if test="${map.busy_type =='0101' || map.busy_type =='0102' || map.busy_type =='0103'}">
	<c:set var="imgUrl" value="charge_bisu.jpg"/>
	<c:set var="usePay" value="${map.busy_1_base }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0104' || map.busy_type =='0105' || map.busy_type =='0106'}">
	<c:set var="imgUrl" value="charge_junsung.jpg"/>
	<c:set var="usePay" value="${map.busy_2_base }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0107' || map.busy_type =='0108' || map.busy_type =='0109'}">
	<c:set var="imgUrl" value="charge_sungsu.jpg"/>
	<c:set var="usePay" value="${map.busy_3_base }000"/>
	</c:if>
<c:if test="${map.pm_per !=0 || map.pm_dc_m !=0 }">
	<c:if test="${map.pm_dc_m != 0  }">
		<c:set var="usePay" value="${usePay - (map.pm_dc_m) }"/>
	</c:if>
	<c:if test="${map.pm_per != 0  }">
		<c:set var="usePay" value="${usePay - (usePay * (0.01 * map.pm_per)) }"/>
	</c:if>
	<c:set var="imgUrl" value="charge_sale.jpg"/>
</c:if>
<img alt="" src="/camping/img/${imgUrl }" align="middle" >
<fmt:formatNumber value="${usePay }" pattern="#,###"/>
									</td>
									<td style="text-align: center;" class="<c:if test="${map.busy_type =='0102' || map.busy_type =='0105' || map.busy_type =='0108'}">calRed bold</c:if>">
<c:set var="usePay" value="0"/>
	<c:if test="${map.busy_type =='0101' || map.busy_type =='0102' || map.busy_type =='0103'}">
	<c:set var="usePay" value="${map.busy_1_fri }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0104' || map.busy_type =='0105' || map.busy_type =='0106'}">
	<c:set var="usePay" value="${map.busy_2_fri }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0107' || map.busy_type =='0108' || map.busy_type =='0109'}">
	<c:set var="usePay" value="${map.busy_3_fri }000"/>
	</c:if>
<c:if test="${map.pm_per !=0 || map.pm_dc_m !=0 }">
	<c:if test="${map.pm_dc_m != 0  }">
		<c:set var="usePay" value="${usePay - (map.pm_dc_m) }"/>
	</c:if>
	<c:if test="${map.pm_per != 0  }">
		<c:set var="usePay" value="${usePay - (usePay * (0.01 * map.pm_per)) }"/>
	</c:if>
</c:if>
<img alt="" src="/camping/img/${imgUrl }" align="middle" >
<fmt:formatNumber value="${usePay }" pattern="#,###"/>
									</td>
									<td style="text-align: center;" class="<c:if test="${map.busy_type =='0103' || map.busy_type =='0106' || map.busy_type =='0109'}">calRed bold</c:if>">
<c:set var="usePay" value="0"/>
	<c:if test="${map.busy_type =='0101' || map.busy_type =='0102' || map.busy_type =='0103'}">
	<c:set var="usePay" value="${map.busy_1_sat }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0104' || map.busy_type =='0105' || map.busy_type =='0106'}">
	<c:set var="usePay" value="${map.busy_2_sat }000"/>
	</c:if>
	<c:if test="${map.busy_type =='0107' || map.busy_type =='0108' || map.busy_type =='0109'}">
	<c:set var="usePay" value="${map.busy_3_sat }000"/>
	</c:if>
<c:if test="${map.pm_per !=0 || map.pm_dc_m !=0 }">
	<c:if test="${map.pm_dc_m != 0  }">
		<c:set var="usePay" value="${usePay - (map.pm_dc_m) }"/>
	</c:if>
	<c:if test="${map.pm_per != 0  }">
		<c:set var="usePay" value="${usePay - (usePay * (0.01 * map.pm_per)) }"/>
	</c:if>
</c:if>
<img alt="" src="/camping/img/${imgUrl }" align="middle" >
<fmt:formatNumber value="${usePay }" pattern="#,###"/>
									</td>
								</tr>
	</c:forEach>
</c:if>

							</tbody>
						</table>
						
						<table style="width: 100%;margin-top: 10px;">
							<tr>
								<td align="center" style="text-align: center;">
									<a href="#" onclick="history.back();"><img alt="" src="/camping/img/btn_back.gif"></a>
									<a href="#" onclick="saveForm();"><img alt="" src="/camping/img/btn_reservation.gif" ></a>
									
									
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>

<form id="frmData" style="display: none;" method="post" action="./petc0200Q.do">
	<input type="hidden" name="p_id" value="${param.p_id }">
	<input type="hidden" name="pg_no" value="${param.pg_no }">
	<input type="hidden" name="reservation_dt" value="${param.reservation_dt }">
	
</form>